swiper_3 的使用

swiper在版本3和4之间的配置文件还是有所差异的，所以，写一下3的使用。
大部分的配置文件3和4还是差不多的，用起来区分好就可以了。

HTML

<div class="swiper-container" id="Pic">
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-active swiper-slide-next" index="1" style="text-align: center;">
                	<div class="swiper-zoom-container">
                    <a><img src="/static/css/img/code-wallpaper-8.jpg"  /></a>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-active swiper-slide-next" index="2" style="text-align: center;">
                	<div class="swiper-zoom-container">
                    <a><img src="/static/css/img/code_by_rasmusir-d4a4dj2.jpg"  /></a>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-active swiper-slide-next" index="2" style="text-align: center;">
                	<div class="swiper-zoom-container">
                    <a><img src="/static/css/img/code-wallpaper-18.png"  /></a>
                    </div>
                </div>
                <div class="swiper-slide swiper-slide-active swiper-slide-next" index="2" style="text-align: center;">
                	<div class="swiper-zoom-container">
                    <a><img src="/static/css/img/code-wallpaper-16.jpg"  /></a>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

配置文件

var mySwiper = new Swiper('.swiper-container', {
		centeredSlides: true,
	  	loop: true,
		slidesPerView: '1',
		effect: 'slide',
		initialSlide: 0,
		observer: true,
		
		zoom:true,
		//自动播放
		autoplay: 3000,
		//鼠标操作之后是否继续自动轮播
		autoplayDisableOnInteraction : false,
		
		//分页
		pagination: '.swiper-pagination',
		//分页样式，以下三种：
//		‘bullets’  圆点（默认）
//		‘fraction’  分式 
//		‘progress’  进度条
		paginationType : 'progress',
		
		//前进后退按钮
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		//滚动条
		scrollbar:'.swiper-scrollbar',
	});